<template>
    <view class="box">

        <!-- 截止时间 -->
        <view class="time">
            <view class="time-title">截止时间</view>
            <view style="height: 10rpx;"></view>
            <view class="time-content" style="font-size: 50rpx;">{{ activity.endTime }}</view>
        </view>

        <!-- 分割线 -->
        <u-divider></u-divider>
        <!-- 头像，状态，注册时间，礼品 -->
        <view style="padding: 20rpx;box-sizing: border-box;">
            <u-row>
                <u-col :span="3">
                    <view 
                    v-if="userList[0].imgUrl!=''&&userList[0].imgUrl!=null"
                    class="avatar-box">
                        <image
                         :src="userList[0].imgUrl" class="avatar" mode="aspectFill"></image>
                    </view>
                    <view 
                    v-else
                    class="avatar-box">
                    未注册
                    </view>

                </u-col>
                <u-col :span="8.8">

                    <u-row>
                        <u-col :span="9">
                            <view style="font-size: 30rpx;"><text style="font-weight: bold;color: #666666;">{{ userList[0].phone }}</text>
                                <text style="margin-left: 10rpx;color: #ff9900;">最后注册</text>
                            </view>
                        </u-col>
                        <u-col :span="3">
                            <view style="text-align: right;color: #dd524d;font-size: 30rpx;">活动中</view>
                        </u-col>
                    </u-row>
                    <view style="height: 30rpx;"></view>
                    <u-row>
                        <u-col :span="8">
                            <view style="font-size: 28rpx;">{{ userList[0].create_at }}</view>
                        </u-col>
                        <u-col :span="4">
                            <view style="text-align: right;font-size: 28rpx;">{{ userList[0].prizeName }}</view>
                        </u-col>
                    </u-row>

                </u-col>
            </u-row>
        </view>

        <!-- 活动细则 -->
        <view style="padding: 20rpx;box-sizing: border-box;">
            <view style="background-color: #fff2cc;padding: 20rpx;box-sizing: border-box;border-radius: 20rpx;">
                <view style="color: #b45f06;font-size: 32rpx;font-weight: bold;">活动细则</view>
                <view style="height: 20rpx;"></view>
                <view style="font-size: 28rpx;color: #bf9000;">
                    <view v-for="(item, index) in activity.contentSplit">
                        <view>{{ item }}</view>
                        <view style="height: 20rpx;"></view>
                    </view>
                </view>
            </view>
        </view>

        <view style="height: 30rpx;"></view>

    </view>
</template>

<script>
export default {
    props: {
        flag: {
            type: String,
            default: ''
        },
        userList:{
            type: Array,
            default: []
        },
        activity:{
            type: Object,
            default: {}
        }
    },
    data() {
        return {
        }
    },
    mounted() {
    },
    // 计算属性
    computed: {

    },

    methods: {
        
    }
}
</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    border-radius: 0 0 30rpx 30rpx;
}

.time {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 200rpx;
    border-radius: 0 0 30rpx 30rpx;

    .time-title {
        font-size: 28rpx;
        color: #ff5363;
    }

    .time-content {
        font-size: 80rpx;
        color: #ff5363;
    }
}

.avatar-box {
    text-align: center;
}

.avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
}
</style>